<template>
  <el-dialog v-model="dialogVisible" :title="title" :width="width"
             :destroy-on-close="destoryOnClose"
             :draggable="true" :close-on-click-modal="false"
             :close-on-press-escape="false">
<!--   插槽 -->
  <slot></slot>
    <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submit" :loading="btnLoading">
                    {{confirmText}}
                </el-button>
            </span>
    </template>
  </el-dialog>
</template>
<script setup>
import {ref} from "vue";
const dialogVisible = ref(false);
const open = ()=> dialogVisible.value = true
const close = ()=> dialogVisible.value = false
const btnLoading = ref(false);
// 显示 loading
const showBtnLoading = ()=> btnLoading.value = true;
// 隐藏 loading
const closeBtnLoading = ()=> btnLoading.value = false;
// 暴露给父组件
defineExpose({
  open,close,showBtnLoading,closeBtnLoading
})

const props = defineProps({
  title: String,
  width: {type:String,default:'40%'},
  destoryOnClose: {type:Boolean,default:false},
  confirmText:{type:String, default: '提交'}
})
// 对外暴露一个 submit 方法
const emit = defineEmits(['submit'])
const submit = ()=> emit('submit')
</script>
<style scoped>

</style>
